<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { get_xiao } from '../../api/index'
import { useRouter } from 'vue-router'
const router = useRouter();
const active = ref(0);
onMounted(async () => {
    const res = await get_xiao();
    const xiaolist: any = res.data.data.data;
    xiaoxi.xiaoname = xiaolist;
    console.log(xiaoxi.xiaoname);
})
const xiaoxi: any = reactive({
    xiaoname: [],
    date: new Date().toLocaleTimeString(),
    newdate: new Date().toLocaleDateString(),
    xiao: [],
    xiaolist: [],
    zhiding: '置顶'
})
// 置顶
const zhi = (e: any, value: any, index: number) => {
    console.log(value);
    console.log(index);
    xiaoxi.xiao.unshift(value as never);
    console.log(xiaoxi.xiao, '==========>');
    if (e === '置顶') {
        xiaoxi.zhiding = '取消置顶'
    }
}

// 删除
const shan = (group_id: any) => {
    const xiaolist = xiaoxi.xiaoname;
    xiaolist.forEach((item: any, index: any) => {
        if (item.group_id === group_id) {
            xiaolist.splice(index, 1)
        }
    })
}

const ding = (group_id: any) => {
    let xilist = xiaoxi.xiao;
    console.log(xilist, '======>');
    xilist.forEach((item: any, index: any) => {
        if (item.group_id === group_id) {
            xilist.splice(index, 1)
        }
    })
}

const xi = (value: any) => {
    router.push(`/message?data=${JSON.stringify(value)}`)
    console.log(value);
}

const leftvan = () => {
    router.push('/home')
}

</script>
<template>
    <div class="box">
        <header><van-icon name="arrow-left" class="van" @click="leftvan()" />
            <h5>消息</h5>
        </header>
        <main>
            <div class="maina">
                <div class="maina_a">
                    <van-tabs v-model:active="active">
                        <van-tab title="消息">
                            <div class="main_b" v-for="(item, index) in xiaoxi.xiao" :key="index">
                                <van-swipe-cell>
                                    <van-cell :border="false">
                                        <img src="./img/16137031243123624.jpg" alt="" class="imgs">
                                        <p class="an">{{ item.house_name }}</p>
                                        <p class="zi">{{ item.group_info }}</p>
                                        <p>{{ xiaoxi.date }}</p>
                                    </van-cell>
                                    <template #right>
                                        <van-button square type="danger" text="删除" class="shan"
                                            @click="shan(item.group_id)" />
                                        <van-button square type="primary" :text="xiaoxi.zhiding" class="zhi"
                                            @click="ding(item.group_id)" />
                                    </template>
                                </van-swipe-cell>
                            </div>
                            <div v-for="(item, index) in xiaoxi.xiaoname" :key="index" class="mainb_b" @click="xi(item)">
                                <van-swipe-cell>
                                    <van-cell :border="false">
                                        <img src="./img/16137031243123624.jpg" alt="" class="imgs">
                                        <p class="an">{{ item.house_name }}</p>
                                        <p class="zi">{{ item.group_info }}</p>
                                        <p>{{ xiaoxi.date }}</p>
                                    </van-cell>
                                    <template #right>
                                        <van-button square type="danger" text="删除" class="shan"
                                            @click="shan(item.group_id)" />
                                        <van-button square type="primary" text="置顶" class="zhi"
                                            @click="zhi('置顶', item, index)" />
                                    </template>
                                </van-swipe-cell>
                            </div>

                        </van-tab>
                        <van-tab title="公告">
                            <div class="van-tab">
                                <div class="vantab_a">
                                    <p class="pp">放假通知</p>
                                    <p class="qq">五月一日放假</p>
                                </div>
                                <div class="vantab_b">
                                    <p class="pp_a">{{ xiaoxi.newdate }} <span>{{ xiaoxi.date }}</span> </p>
                                </div>
                            </div>
                        </van-tab>
                    </van-tabs>
                </div>
            </div>
        </main>
        <footer></footer>
    </div>
</template>
<style scoped lang="scss">
.box {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;

    header {
        width: 100vw;
        height: 70px;
        background-color: #0C7BF2;

        h5 {
            text-align: center;
            line-height: 6vh;
            color: #fff;
            font-size: 14px;
            margin-left: -5px;
        }

        .van {
            float: left;
            line-height: 73px;
            color: #fff;
            font-size: 17px;
            margin-left: 10px;
        }
    }

    main {
        flex: 1;
        overflow: auto;

        .maina {
            width: 100vw;
            height: 800px;
            background: #ccc;

            .maina_a {
                width: 100vw;
                height: 100px;

                .imgs {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    float: left;
                }

                .an {
                    float: left;
                    margin-left: 20px;
                    margin-top: -5px;
                }

                .zi {
                    float: left;
                }
            }

            .main_b {
                width: 100vw;
                height: 80px;
                margin-top: 15px;
            }

            .mainb_b {
                width: 100vw;
                height: 70px;
                margin-top: 10px;
            }

            .shan {
                height: 100%;
            }

            .zhi {
                height: 100%;
            }

            .van-tab {
                width: 90vw;
                height: 100px;
                margin: auto;
                margin-top: 10px;
                border: 1px solid #000;
                background-color: #fff;

                .vantab_a {
                    width: 35vw;
                    height: 100%;
                    margin-right: 100px;

                    .pp {
                        font-size: 20px;
                        margin-left: 10px;
                        margin-top: 20px;
                    }

                    .qq {
                        margin-left: 9px;
                        margin-top: -20px;
                    }
                }

                .pp_a {
                    width: 130px;
                }
            }
        }
    }
}
</style>